<template>
	<view class="recharge-history-page">
		<view class="box">
			<view class="item" v-for="(item,index) in formattedTimes" :key="index">
				<view class="left">
					<view class="money">+{{item.money}}</view>
					<view class="time">{{item.formattedTime}}</view>
				</view>
				<view class="right">
					<view class="manner">{{item.product_name}}</view>
					<view class="status">充值成功</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: []
			}
		},
		onShow() {
			this.getList()
		},
		computed: {
			//转换时间
			formattedTimes() {
				return this.listData.map((item, index) => {
					const date = new Date(item.create_time * 1000)
					const year = date.getFullYear();
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					const hours = date.getHours().toString().padStart(2, '0');
					const minutes = date.getMinutes().toString().padStart(2, '0');
					const seconds = date.getSeconds().toString().padStart(2, '0');
					const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					return {
						...item,
						formattedTime
					};
				})
			},
		},
		methods: {
			getList() {
				uni.request({
					url: "/api/user/recharge_list",
					method: "POST",
					header: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					console.log(res.data.data.data);
					this.listData = res.data.data.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.recharge-history-page {
		width: 100vw;
		height: 91vh;
		padding-top: 10rpx;
		background-color: #F8F8F8;

		.box {
			width: 90%;
			height: 100%;
			margin: auto;
			margin-top: 20rpx;
			background-color: white;
			border-radius: 20rpx;
			overflow-y: scroll;

			.item {
				width: 90%;
				height: 150rpx;
				margin: auto;
				border-bottom: 1px solid #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					margin-left: 20rpx;

					.money {
						font-weight: bold;
						font-size: 34rpx;
					}

					.time {
						font-size: 26rpx;
						color: #949494;
					}
				}

				.right {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					margin-right: 20rpx;
					text-align: right;

					.manner {
						font-size: 26rpx;
						color: #949494;
					}

					.status {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>